<template>
  <div class="app-container">
    <el-card class="dis">
      <el-form :inline="true" :model="formInline" class="demo-form-inline formHeight">
        <el-form-item label="">
          <el-input v-model="formInline.keyword" placeholder="关键字:抢修标题" size="mini" />
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="search">查询</el-button>
          <!-- <el-button type="primary" size="mini" @click="addOrEdit(1)">新增</el-button> -->
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 表单 -->
    <el-card class="mt20">
      <el-table
        ref="multipleTable"
        :data="tableData"
        border
        size="mini"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          align="center"
          label="抢修编号"
          prop="task_num"
          width="170"
        />
        <el-table-column
          align="center"
          label="工单编号"
          prop="task_num"
          width="170"
        />
        <el-table-column
          align="center"
          label="开始时间"
          prop="task_start"
          width="145"
        />
        <el-table-column
          align="center"
          label="结束时间"
          prop="task_end"
          width="145"
        />
        <el-table-column
          align="center"
          label="抢修结果"
          prop="task_result"
          width="95"
        >
          <template slot-scope="scope">
            <el-tag v-if="scope.row.task_result!=='正常'">{{ scope.row.task_result }}</el-tag>
            <el-tag v-if="scope.row.task_result=='正常'" type="success">{{ scope.row.task_result }}</el-tag>

          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="执行班组/人"
          prop="user_name"
          width="170"
        />
        <el-table-column
          align="center"
          label="抢修标题"
          prop="task_title"
          width="145"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          align="center"
          label="抢修内容"
          prop="task_content"
          width="145"
        />
        <el-table-column
          align="center"
          label="累计用时"
          prop="total_time"
          width="145"
        />
        <el-table-column
          align="center"
          label="任务附件"
          prop="name"
          width="80"
        >
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="handleClick(scope.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="handleDelete(scope.$index, scope.row)"
            >进度
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination style='float: right;' v-show='totals>0' :total='totals' :page.sync='currentPage' :limit.sync='pageSixe' @pagination='getMaintainList' />
    </el-card>
    <!-- 底部分页 -->
<!--    <div class="currentPage">-->
<!--      <el-pagination-->
<!--        :current-page="currentPage"-->
<!--        :page-size="pageSixe"-->
<!--        :page-sizes="[10, 20, 50, 100]"-->
<!--        :total="totals"-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"-->
<!--        @prev-click="handelPrevChange"-->
<!--        @next-click="handelNextChange"-->
<!--      />-->
<!--    </div>-->
    <!-- 查看附件弹框 -->
    <el-dialog v-dialogDrag :title="seeTitle" :visible.sync="dialogTableVisible" center width="30%">
      <div slot="title" class="header-title">
        <i class="el-icon-edit" />
        <span class="seeTit">{{ seeTitle }}</span>
      </div>
      <Dialogs :accids="accids" @detailes="detailClosed()" />
    </el-dialog>
    <!-- 进度弹框 -->
    <el-dialog v-dialogDrag :title="proTitle" :visible.sync="dialogTableVisible2" center>
      <div slot="title" class="header-title">
        <i class="el-icon-edit" />
        <span class="seeTit">{{ proTitle }}</span>
      </div>
      <div>
        <Progress :num="num" :pro-dtetail="proDtetail" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="dialogTableVisible2 = false">关闭</el-button>
        <!-- <el-button type="primary" @click="dialogVisible = false">确 定</el-button> -->
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { progre, repairRecordList } from '@/api/repair'
import Dialogs from './components/dialogs.vue'

import Progress from './components/progress.vue'

export default {
  name: 'index',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    Dialogs,
    Progress

  },
  data() {
    return {
      tableData: [],
      multipleSelection: [], // 列表选中的数据
      currentPage: 1,
      pageSixe: 10,
      totals: 0,
      formInline: {
        offset: 0,
        limit: 10,
        keyword: ''
      },
      tableAllData: [], // 导出的数据
      // 导出配置数据
      exportExcelArry: [{
        prop: 'task_num',
        label: '编号',
        formatterFlag: false
      }, {
        prop: 'site_name',
        label: '站点',
        formatterFlag: false
      }, {
        prop: 'task_title',
        label: '任务标题',
        formatterFlag: false
      }, {
        prop: 'task_content',
        label: '任务内容',
        formatterFlag: false
      }, {
        prop: 'task_start',
        label: '开始时间',
        formatterFlag: false
      }, {
        prop: 'task_end',
        label: '结束时间',
        formatterFlag: false
      },
      {
        prop: 'task_status',
        label: '任务状态',
        formatterFlag: false
      }, {
        prop: 'work_num',
        label: '创建人',
        formatterFlag: false
      }, {
        prop: 'created_at',
        label: '创建时间',
        formatterFlag: false
      }],
      // 导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: 'task-table',
        excelName: '报修任务.xlsx'
      },
      dialogTableVisible: false,
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      seeTitle: '附件列表',
      seeDetails: [],
      proTitle: '进度',
      proDtetail: '',
      num: '',
      accids: ''
    }
  },

  created() {
    this.getMaintainList()
  },
  // maintainAdd
  methods: {
    // 获取记录
    getMaintainList() {
      this.formInline.offset = this.currentPage
      this.formInline.limit = this.pageSixe
      repairRecordList(this.formInline).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.plans
          this.tableData.forEach((item) => {
            if (item.task_status == '') {
              item.task_status = '已提交'
            }
          })
          this.totals = res.data.total
        }
      })
    },
    // 搜索
    search() {
      this.formInline.offset = this.currentPage
      this.formInline.limit = this.pageSixe
      repairRecordList(this.formInline).then(res => {
        if (res.code === 200) {
          this.tableData = res.data.plans
          this.tableData.forEach((item) => {
            if (item.task_status == '') {
              item.task_status = '已提交'
            }
          })
          this.totals = res.data.total
        }
      })
    },
    // 查看
    handleClick(a) {
      this.dialogTableVisible = true
      // this.seeDetails = a.id
      this.accids = a.id
    },
    detailClosed(a) {
      this.dialogTableVisible = a
    },

    // 进度
    handleDelete(a, b) {
      this.dialogTableVisible2 = true
      const data = {
        task_num: b.task_num
      }
      progre(data).then(res => {
        this.proDtetail = res.data.list
        if (this.proDtetail.length == 0) {
          const arr1 = [
            {
              status_name: '已提交',
              created_at: b.created_at,
               user_id:b.user_name
            },
            {
              status_name: '已派单',
              created_at: ''
            },
            {
              status_name: '执行中',
              created_at: ''
            },
            {
              status_name: '已完成',
              created_at: ''
            },
            {
              status_name: '已确认',
              created_at: ''
            }
          ]
          this.proDtetail = arr1
          this.num = 1
        } else {
          const nums = this.proDtetail[this.proDtetail.length - 1].task_status
          this.proDtetail.unshift(
            {
              status_name: '已提交',
              created_at: b.created_at,
               user_id:b.user_name
            }
          )
          this.num = this.proDtetail.length
          if (nums == 1) {
            const arr2 = [
              {
                status_name: '执行中',
                created_at: ''
              },
              {
                status_name: '已完成',
                created_at: ''
              },
              {
                status_name: '已确认',
                created_at: ''
              }
            ]
            this.proDtetail = this.proDtetail.concat(arr2)
          }
          if (nums == 2) {
            const arr3 = [

              {
                status_name: '已完成',
                created_at: ''
              },
              {
                status_name: '已确认',
                created_at: ''
              }
            ]
            this.proDtetail = this.proDtetail.concat(arr3)
          }
          if (nums == 3) {
            const arr4 = [
              {
                status_name: '已确认',
                created_at: ''
              }
            ]
            this.proDtetail = this.proDtetail.concat(arr4)
          }
        }
      })
    },
    // 表单选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 导出
    exportExcelSelect() {
      if (this.multipleSelection.length === 0) {
        this.tableAllData = this.tableData
      } else {
        this.tableAllData = this.multipleSelection
      }
      // // 将选中项传给this. tableAllData
      // this.tableAllData = this.selectListArry
      // 需要延时调导出方法，为了等待数据初始化到列表中
      setTimeout(() => {
        this.$refs.myChild.exportExcel()
      }, 500)
    },
    exportExcel() {
      this.initData('export-excel')
      // 获取到表格数据的值并赋给this.tableAllData
      // 同样延时调导出方法，需在initData('export-excel')方法执行成功后调this.$refs.myChild.exportExcel();方法
    },
    handleSizeChange(val) {
      this.pageSixe = val
      this.getMaintainList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getMaintainList()
    },
    handelPrevChange(val) {
      this.currentPage = val
      this.getMaintainList()
    },
    handelNextChange(val) {
      this.currentPage = val
      this.getMaintainList()
    }
  }
}
</script>
<style lang="scss" scoped>
.con {
  padding-left: 5px;
  padding-right: 7px;

  .top_sea {
    position: relative;
    display: flex;
    height: 35px;
    width: 400px;
    font-size: 12px;

    .seaIcon {
      position: absolute;
      top: 13px;
      left: 8px;
      z-index: 999;
    }

    ::v-deep .el-input__inner {
      padding-left: 25px;
    }
  }

  .fj {
    color: #409EFF;
  }

  .currentPage {
    // display: flex;
    position: fixed;
    bottom: 0;
    right: 0;
    // flex-direction: row-reverse;
    // margin-top: 20px;
  }

  .header-title {
    .seeTit {
      padding-left: 10px;
    }
  }

  ::v-deep .el-dialog__header {
    background-color: #263445;
    color: #fff;
  }

  .dialog-footer {
    text-align: right;

  }

  ::v-deep .el-dialog__footer {
    text-align: right;
  }
}
.formHeight{
  height: 40px;
}
</style>
